<template>
	<div style="width:95%;margin-left: 2%;text-align: left;height: auto;">
		<a-comment>
			<template #actions>
				<a-row>
					<a-col :span="17">
						<span style="width: auto;text-align: left;">
							<a-popover position="tl" trigger="click" style="width: 400px;height: auto;">
								<i class="iconfont iconfont-expression" style="font-size: 18px;cursor: pointer;" />
								<template #content>
									<a-tabs position="left" style="margin-left: -6%;">
										<a-tab-pane :title="item.name" v-for="(item,index) in faceList.emojiArr" 
										:key="index" style="width: 100%;min-height: 100px;max-height: 150px;overflow-y: scroll;">
											<a-space wrap align="center">
												<a-col v-for="(itemChild,indexChild) in faceList.emojiArr[index].iconArr"
												:key="indexChild" @click="addEmoji(itemChild.icon)"
												style="cursor: pointer;"
												>
													{{itemChild.icon}}
												</a-col>
											</a-space>
										</a-tab-pane>
									</a-tabs>
								</template>
							</a-popover>
						</span>
					</a-col>
					<a-col :span="3">
						<a-button type="primary" style="transform: translateX(16%);" @click="submitComment">
							<template #icon>
								<IconMessage style="cursor: pointer;" />
							</template>
							<template #default>
								评论
							</template>
						</a-button>
					</a-col>
				</a-row>
			</template>
			<template #avatar>
				<a-avatar>
					<img alt="avatar"
						src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp" />
				</a-avatar>
			</template>
			<template #content>
				<div>
					<a-mention id="commentText" :model-value="commentContent"
					style="width: 365px;" type="textarea" 
					:data="mentionsList"
					:auto-size="{
					    minRows:2,
					    maxRows:5
					  }"
					/>
				</div>
			</template>
		</a-comment>
		<a-divider  />
		<a-comment v-for="(commentItem,index) in commentsList.data" :key="index">
			<template #avatar>
				<a-avatar>
					<img alt="avatar" :src="commentItem.avatar" />
				</a-avatar>
			</template>
			<template #content>
				{{commentItem.content}}
			</template>
			<template #datetime>
				<span>发布于：{{commentItem.publishTime}}</span>
				<span style="color: #272E3B;">&nbsp;({{moment(commentItem.publishTime).fromNow()}})</span>
			</template>
			<template #author>
				<a-row :wrap="false">
					<a-col :span="12">
						{{commentItem.nickName}}
					</a-col>
					<a-col :span="12">
						<span v-if="commentItem.uid == currentuId"
						style="display: inline-block;width: 173px;text-align: right;margin-left: 5px;height: 16px;
						">
							<span style="cursor: pointer;" @click="deleteMyComment(commentItem.cId)">删除</span>
						</span>
					</a-col>
				</a-row>
			</template>
			<a-divider style="transform: translateX(-13%);padding-left: 55px;"/>
		</a-comment>
		<a-row :wrap="false">
			<a-col style="text-align: left;">
				<a-pagination :total="commentsList.total" show-total :page-size="currentPageSize"
				  @change="changePageList" v-if="commentsList.total > 0"/>
				 <a-result :status="null" v-else-if="commentsList.total == 0">
				 	<template #icon>
				 		<IconFaceFrownFill style="color: gray;"/>
				 	</template>
				 	<template #title>这里什么也没有哦</template>
				 	<a-typography style="background: var(--color-fill-2); padding: 24px;">
				 		<a-typography-paragraph>该商品还没有人评论</a-typography-paragraph>
				 	</a-typography>
				 </a-result>
			</a-col>
		</a-row>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted,
		nextTick
	} from 'vue';

	import faceList from '@/components/modelDetail/emoji/emojiArr.js';
	import indexApi from '@/module/modelDetail/api/index.js';
	import jwt_decode from 'jwt-decode';
	import { Modal } from '@arco-design/web-vue';
	import moment from "moment";
	import 'moment/dist/locale/zh-cn'
	moment.locale('zh-cn');

	let {
		proxy
	} = getCurrentInstance();

	const props = defineProps({
		commentsList: Object,
		mentionsList:Array,
		currentPage:Number,
		currentPageSize:Number,
		dId:String
	});

	const emit = defineEmits();

	let currentStarList = reactive({
		list: []
	});
	let star = ref(false);

	let currentLikeList = ref([]);
	let like = ref(false);

	let comment = ref(false);
	let currentComment = ref();

	let actionList = reactive({});
	
	let commentContent = ref();
	let myCommentStatus = reactive({});
	let currentuId;
	if(sessionStorage.getItem('token')){
		currentuId = jwt_decode(sessionStorage.getItem("token")).uid;
	}
	
	async function submitComment(){
		let commentText = document.querySelector('#commentText .arco-textarea');
		console.log('myComment',commentText.value);
		console.log('dId',props.dId);
		if(sessionStorage.getItem("token") && commentText.value.trim() != ''){
			let commentDto = {
				dId: props.dId,
				uId: jwt_decode(sessionStorage.getItem("token")).uid,
				content: commentText.value
			};
			console.log('commentDto',commentDto);
			myCommentStatus.resp = await indexApi.submitComment(commentDto);
			console.log('myCommentStatus.resp',myCommentStatus.resp);
			if(myCommentStatus.resp.flag == true){
				proxy.$message.success('评论成功');
				commentText.value = '';
				emit('refrushParnentComment',true);
			}
			else if(myCommentStatus.resp.flag == false){
				proxy.$message.error('请购买该商品后再参与评论');
				commentText.value = '';
			}
		}
		else if(sessionStorage.getItem("token") && commentText.value.trim() == ''){
			proxy.$message.error('请输入内容');
		}
		else{
			proxy.$message.error('请先登录');
		}
	}
	
	async function deleteMyComment(cId){
		Modal.open({
		        title: '警告',
		        content: '确定要删除该评论吗?',
				async onOk(){
					let myDeleteCommentStatus = reactive({});
					let commentDto = {
						dId: props.dId,
						cId: cId
					};
					console.log('commentDto',commentDto);
					myDeleteCommentStatus.resp = await indexApi.deleteCommentByCid(commentDto);
					console.log('myDeleteCommentStatus.resp',myDeleteCommentStatus.resp);
					if(myDeleteCommentStatus.resp.flag == true){
						proxy.$message.success('删除评论成功');
						nextTick(()=>{
							emit('refrushParnentComment',true);
						});
					}
					else if(myDeleteCommentStatus.resp.flag == false){
						proxy.$message.error('删除评论失败');
					}
				}
		      });
	}

	function onLikeChange(index) {
		like.value = !like.value;
		currentComment.value = index;
	}

	function onComment(index) {
		comment.value = !comment.value;
		currentComment.value = index;
	}
	
	function addEmoji(val){
		//获取文本框的节点
		let commentText = document.querySelector('#commentText .arco-textarea');
		//获取光标
		let cursor = commentText.selectionStart;
		//设置文本内容
		commentText.setRangeText(val);
		//移动光标并聚焦
		commentText.selectionStart = cursor + 2;
		commentText.focus();
		//使文本框的内容等于当前值
		commentContent.value = commentContent.value;
	}
	
	function changePageList(number){
		console.log('当前页数:',number);
		emit('PageChange',number);
	}
	
	onMounted(() => {
		console.log('commentsList',props.commentsList);
		console.log('props',props)
	});
</script>

<style lang="less" scoped>
</style>
